<template>
  <div class="app-container">
    <el-header>
      <h3 style="font-family: Microsoft YaHei">个人中心</h3>
      <hr style="border: 0.5px solid #dcdfe6">
    </el-header>
    <!-- 个人信息表单显示 -->
    <el-form ref="dataForm" :model="temp" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="24" :lg="12" style="width: 400px; margin-left:50px;">
          <el-form-item label="员工编号" prop="userId">
            <el-input v-model="temp.userId" :disabled="true" />
          </el-form-item>
          <el-form-item label="姓名" prop="username">
            <el-input v-model="temp.username" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="temp.password" />
          </el-form-item>
          <el-form-item label="联系电话" prop="userMobile">
            <el-input v-model="temp.userMobile" />
          </el-form-item>
          <el-form-item label="邮箱" prop="userEmail">
            <el-input v-model="temp.userEmail" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12" style="width: 400px; margin-left:50px;">
          <el-form-item label="薪资/月" prop="userSalary">
            <el-input v-model.number="temp.userSalary" />
          </el-form-item>
          <el-form-item label="部门" prop="userDepartmentId">
            <el-select v-model="temp.userDepartmentId" class="filter-item" clearable style="width: 180px;">
              <el-option v-for="item in options" :key="item.departmentId" :label="item.departmentName"
                :value="item.departmentId" />
            </el-select>
          </el-form-item>
          <el-form-item label="角色" prop="userRole">
            <el-select v-model="temp.userRole" placeholder="请选择" clearable>
              <el-option v-for="item in statusRoleOptions" :key="item.key" :label="item.display_name"
                :value="item.key" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="userStatus">
            <el-select v-model="temp.userStatus" placeholder="请选择" clearable>
              <el-option v-for="item in statusOptions" :key="item.key" :label="item.display_name" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
          <el-form-item>
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="updateData">确认</el-button>
          </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import waves from '@/directive/waves'            // Waves directive
  import { parseTime } from '@/utils'
  import { fetchDepartmentSeries } from '@/api/init'
  import { fetchList, updateUser } from '@/api/system_users'
  import { } from '@/vendor/Export2Excel'

  const statusOptions = [
    { key: 0, display_name: '禁止' },
    { key: 1, display_name: '在职' }
  ]
  const statusRoleOptions = [
    { key: 0, display_name: '普通用户' },
    { key: 1, display_name: '管理员' }
  ]

  const statusSexOptions = [
    { key: 0, display_name: '女' },
    { key: 1, display_name: '男' }
  ]

  const calendarTypeKeyValue = statusOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  const calendarTypeKeyValueRole = statusRoleOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  const calendarTypeKeyValueSex = statusSexOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  export default {
    directives: {
      waves
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          0: 'danger',
          1: 'success',
          3: 'info'
        }
        return statusMap[status]
      },
      typeFilter(type) {
        return calendarTypeKeyValue[type]
      },
      sexTypeFilter(type) {
        return calendarTypeKeyValueSex[type]
      },
      roleTypeFilter(type) {
        return calendarTypeKeyValueRole[type]
      }
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 5,
          userId: undefined,
          username: undefined,
          userIdCard: undefined,
          userStatus: undefined,
          userDepartmentId: undefined,
          userRole: undefined,
          orderBy: undefined
        },
        statusOptions,
        statusRoleOptions,
        statusSexOptions,
        temp: {
          userId: undefined,
          username: undefined,
          password: undefined,
          userSex: undefined,
          userImg: undefined,
          userIdCard: undefined,
          userSalary: undefined,
          userMobile: undefined,
          userEmail: undefined,
          userStatus: undefined,
          userDepartmentId: undefined,
          userRole: undefined,
          createdTime: undefined,
          updatedTime: undefined,

          userSexName: undefined
        },
        mytemp: {
          departmentName: ""
        },
        dialogFormVisible: false,
        addDialogFormVisible: false,
        options: [],
        rules: {
          username: [
            { required: true, message: '请输入员工姓名' }
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' }
          ],
          userMobile: [
            { required: true, message: '请输入电话号码', trigger: 'blur' }
          ],
          userEmail: [
            { required: true, message: '请输入邮箱', trigger: 'blur' }
          ],
          userSalary: [
            { required: true, message: '请输入员工薪水', trigger: 'blur' },
            { type: 'number', message: '售价必须为数字值' }
          ],
          userRole: [
            { required: true, message: '请输入员工角色', trigger: 'blur' }
          ],
          userDepartmentId: [
            { required: true, message: '请输入所属部门', trigger: 'blur' }
          ],
          userStatus: [
            { required: true, message: '请输入员工状态', trigger: 'blur' }
          ],
          departmentName: [
            { required: true, message: '请输入部门名称', trigger: 'blur' }
          ],
          userSexName: [
            { required: true, trigger: 'blur' }
          ],
          userIdCard: [
            { required: true, message: '请输入身份证号码', trigger: 'blur' }
          ],
        },
        downloadLoading: false
      }
    },
    created() {
      this.getList()
      this.getCategoryOpt()
    },
    methods: {
      getCategoryOpt() {
        fetchDepartmentSeries().then(response => {
          this.options = response.data.data
        })
      },
      // checkPermission,
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          if (response.data.code == 10000) {
            this.list = response.data.data.items
            this.total = response.data.data.total
          } else {
            this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
          this.listLoading = false
        })
      },
      departmentFilter(department) {
        for (const v of this.options) {
          if (v.departmentId == department) {
            return v.departmentName
          }
        }
        return undefined
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleUpdate(row) {
        this.dialogFormVisible = true
        this.temp = Object.assign({}, row)
        this.temp.password = undefined
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      parseTime,
      updateData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.temp)
            updateUser(tempData).then(response => {
              if (response.data.code === 10000) {
                this.getList()
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$notify({
                  title: '错误',
                  message: response.data.message,
                  type: 'error',
                  duration: 2000
                })
              }
              this.dialogFormVisible = false
            })
          }
        })
      },
    }
  }
</script>